import React, { useEffect, useState } from "react";
import request, { baseUrl } from "../../utils/request";
import { useParams } from "react-router-dom";
import { Row, Col, Layout, Button, Input, Form, Comment as CME, List, Tooltip } from 'antd'
import { useSearchParams } from "react-router-dom";
import { connect } from "react-redux";
const { Sider, Content } = Layout;
const { TextArea } = Input;
// import {use}
function Comment({ user }) {
    // console.log('props', user);
    const [params, setParams] = useSearchParams()
    const [detaildata, setDetaildate] = useState([])
    const id = user.userInfo.id
    const username = user.userInfo.username
    // console.log(id);
    const [data, setData] = useState([])
    const movieID = params.get('movieID')
    const getComment = () => {
        request({
            url: '/comment/getComment',
            params: {
                movieID,
            }
        }).then(res => {
            // console.log(res.data.data);
            const commentData = res.data.data
            let newdata = commentData.map(item => {
                let obj = {
                    author: item.username,
                    content: (
                        <p>{item.comment}</p>
                    ),
                    datetime: (
                        <Tooltip title="2016-11-22 11:22:33">
                            <span>{new Date().toLocaleString()}</span>
                        </Tooltip>
                    ),
                    avatar: 'https://joeschmoe.io/api/v1/random'

                }

                return obj
            })
            setData(newdata)

        })
    }

    useEffect(() => {
        getComment()
    }, [])
    // console.log(data);
    const onFinish = ({ comment }) => {
        request({
            url: '/comment/addComment',
            method: 'post',
            data: {
                id,
                comment,
                movieID,
                username
            }
        }).then(res => {
            getComment()
        })
    }


    return (
        <div>
            <Layout style={{
                borderRadius: '18px',
                boxShadow: ' 0 7px 21px rgb(149 157 165 / 22%)',
                background: ' #fff',
                width: '80vw',
                margin: 'auto',
                padding: '20px',
                marginTop: '80px'

            }}>
                <h2 style={{
                    fontSize: '26px',
                    fontWeight: '400',


                }}>评论</h2>

                <Content>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}

                        autoComplete="off"
                    >
                        <Form.Item
                            name="comment"
                            rules={[
                                {
                                    required: true,
                                    message: '',
                                },
                            ]}
                            wrapperCol={{
                                span: 24,
                            }}

                        >
                            <TextArea size={'large'} />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                push: '21',
                                span: 3,
                            }}
                        >
                            <Button className="btn" block={true} type="primary" htmlType="submit" size={'middle'} style={{ background: '#25252b' }}>
                                发布
                            </Button>
                        </Form.Item>
                    </Form>

                    <List
                        className="comment-list"
                        header={`${data.length} replies`}
                        itemLayout="horizontal"
                        dataSource={data}
                        renderItem={(item) => (
                            <li>
                                <CME
                                    actions={item.actions}
                                    author={item.author}
                                    avatar={item.avatar}
                                    content={item.content}
                                    datetime={item.datetime}
                                />
                            </li>
                        )}
                    />
                </Content>

            </Layout>



        </div>
    )
}

const mapStateToProps = function (state) {
    console.log(state);
    return {
        user: state
    }
}

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
    }
}
Comment = connect(mapStateToProps, mapDispatchToProps)(Comment)

export default Comment